<template>
  <div class="shop-content">
    <ul class="entrust-list" v-infinite-scroll="load" infinite-scroll-distance="30px">
      <li v-for="item, index in entrustLoadArr" :key="item.ent_id" @click="entrustClickEvent(item.ent_id)">
        <el-card class="box-card entrust">
          <div class="entrust-img">
            <el-image style="width: 150px; height: 150px" :src="'http://127.0.0.1:3000/uploads' + item.ent_cover" fit="fill" slot="images" />
          </div>
          <div class="entrust-message">
            <h3>{{ item.ent_title }}</h3>
            <div class="entrust-message-overview">
              <span>{{ item.ent_biography }}</span>
            </div>
            <div class="entrust-message-price">总价格: <span style="font-weight: 700;">{{ item.ent_price }}</span></div>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { IProjectInfo } from "./type"
import Service from "@/utils/axios"
let arr: any[] = [];

// 路由
const route = useRoute()
const router = useRouter()

// 瀑布流
const count = ref(4)
const entrustLoadArr = ref<any[]>([])

const load = () => {
  // entrustLoadArr.value.push(...arr.slice(count.value, count.value += 4))

    // tag
    if (route.query.entTag) {
    if (route.query.entTag == '全部') {
      entrustLoadArr.value.push(...arr.slice(count.value, count.value += 8))
    } else {
      entrustLoadArr.value.push(...(arr.slice(count.value, count.value += 8).filter(item => (item.tags).includes(route.query.entTag))))
    }
  }

  // search
   else if (route.query.entSearch) {
    entrustLoadArr.value.push(...(arr.slice(count.value, count.value += 8).filter(item => (item.ent_title).includes(route.query.entSearch))))
  } else {
    entrustLoadArr.value.push(...arr.slice(count.value, count.value += 8))
  }
}
// 获取全部委托信息
const handleGetEntrustInfo = () => {
  Service.get('/bkapi/entrustInfo/getEntrustInfoAll').then((res: any) => {
    console.log('test',res.data?.data?.rows)
    arr = ([...res.data?.data?.rows].filter(item => item.status !==0))
    // entrustLoadArr.value.push(...arr.slice(0, 4))


    // arr = ([...res.data?.rows])
    // tag
    if (route.query.entTag) {
      if (route.query.entTag == '全部') {
        entrustLoadArr.value.push(...arr.slice(0, 8))
      } else {
        let resultArr = arr.filter(item => (item.tags).includes(route.query.entTag))
        entrustLoadArr.value.push(...(resultArr.slice(0, 8).filter(item => (item.tags).includes(route.query.entTag))))
      }
    }
    // search
     else if(route.query.entSearch) {
      let resultArr = arr.filter(item => (item.ent_title).includes(route.query.entSearch))
      entrustLoadArr.value.push(...(resultArr.slice(0, 8)))
    } else {
      entrustLoadArr.value.push(...arr.slice(0, 8))
    }
  })
}

// 委托点击事件 跳转到委托详情页
const entrustClickEvent = (entrustId: string) => {
  console.log('被点击的项目id',entrustId)
  router.push({
    name: 'Entrust',
    params: {id: entrustId}
  })
}


onMounted(() => {
  // 获取全部委托信息
  if (route.query.entSearch) {
    entrustLoadArr.value.length = 0
    count.value = 8;
    arr = [];
    // console.log('entrustLoadArr.value', entrustLoadArr.value)
    handleGetEntrustInfo()
  } else {
    handleGetEntrustInfo()
  }
})
</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.entrust-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 30px;

  &>li {
    width: calc((100% - 80px) / 4);
    margin-right: 26px;
    margin-bottom: 14px;
  }

  &>li:nth-of-type(4n+0) {
    margin-right: 0;
  }
}

.entrust {
  height: 400px;
  margin: 0 auto;

  &> :deep(.el-card__body) {
    // position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .entrust-img {
    margin: 0 auto;
    margin-top: 30px;
    width: 150px;
    height: 150px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 5px @border-color;
  }

  .entrust-message {
    margin: 0 auto;
    margin-top: 20px;
    width: 150px;
    height: 150px;
    padding: 15px;
    border-top: 2px solid @border-color;

    position: relative;

    h3 {
      font-size: 20px;
    }

    .entrust-message-overview {
      height: 96px;
      margin-top: 10px;
      display: -webkit-box !important;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }

    .entrust-message-price {
      position: absolute;
      bottom: 40px;
      left: 10;
      font-size: 16px;
      color: #ff723e;
    }
  }

}
</style>